<template>
  <canvas
    class="ruler"
    ref="canvasRef"
    @click="handleClick"
    @mouseenter="handleEnter"
    @mousemove="handleMove"
    @mouseleave="handleLeave"
  />
</template>

<script>
import {
  drawHorizontalRuler,
  drawVerticalRuler,
} from '../../../../../../utils/ruler'
import { defineComponent, onMounted, ref, watch } from 'vue'

const getValueByOffset = (offset, start, scale) =>
  Math.round(start + offset / scale)

export default defineComponent({
  name: 'ruler-canvas',
  props: {
    vertical: Boolean,
    start: Number,
    scale: Number,
    width: Number,
    height: Number,
    canvasConfigs: Object,
    selectStart: Number,
    selectLength: Number,
    isShowReferLine: {
      type: Boolean,
      default: true,
    },
  },
  emits: ['onAddLine', 'onIndicatorShow', 'onIndicatorMove', 'onIndicatorHide'],
  setup(props, ctx) {
    const canvasRef = ref()
    const canvasContext = ref({})
    watch(
      () => props.start,
      (s) => {
        drawRuler()
      }
    )
    watch(
      () => props.width,
      (s) => {
        updateCanvasContext()
        drawRuler()
      }
    )
    watch(
      () => props.height,
      (s) => {
        updateCanvasContext()
        drawRuler()
      }
    )
    const initCanvasRef = () => {
      canvasContext.value = canvasRef.value.getContext('2d')
    }
    const updateCanvasContext = () => {
      const { ratio } = props.canvasConfigs
      canvasRef.value.width = props.width * ratio
      canvasRef.value.height = props.height * ratio

      const ctx = canvasRef.value.getContext('2d')
      ctx.font = `${12 * ratio}px -apple-system,
                "Helvetica Neue", ".SFNSText-Regular",
                "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB",
                "Microsoft YaHei", "WenQuanYi Zen Hei", sans-serif`
      ctx.lineWidth = 1
      ctx.textBaseline = 'middle'
    }
    const drawRuler = () => {
      const option = {
        scale: props.scale,
        width: props.width,
        height: props.height,
        canvasConfigs: props.canvasConfigs,
      }
      if (props.vertical) {
        drawVerticalRuler(
          canvasContext.value,
          props.start,
          {
            y: props.selectStart,
            height: props.selectLength,
          },
          option
        )
      } else {
        drawHorizontalRuler(
          canvasContext.value,
          props.start,
          {
            x: props.selectStart,
            height: props.selectLength,
          },
          option
        )
      }
    }
    const handleClick = (e) => {
      if (!props.isShowReferLine) {
        return
      }
      const offset = props.vertical ? e.offsetY : e.offsetX
      const value = getValueByOffset(offset, props.start, props.scale)
      ctx.emit('onAddLine', value)
    }
    const handleEnter = (e) => {
      if (!props.isShowReferLine) {
        return
      }
      const offset = props.vertical ? e.offsetY : e.offsetX
      const value = getValueByOffset(offset, props.start, props.scale)
      ctx.emit('onIndicatorShow', value)
    }
    const handleMove = (e) => {
      if (!props.isShowReferLine) {
        return
      }
      const offset = props.vertical ? e.offsetY : e.offsetX
      const value = getValueByOffset(offset, props.start, props.scale)
      ctx.emit('onIndicatorMove', value)
    }
    const handleLeave = () => {
      if (!props.isShowReferLine) {
        return
      }
      ctx.emit('onIndicatorHide')
    }
    onMounted(() => {
      initCanvasRef()
      updateCanvasContext()
      drawRuler()
    })
    return {
      canvasRef,
      canvasContext,
      initCanvasRef,
      updateCanvasContext,
      drawRuler,
      handleClick,
      handleLeave,
      handleEnter,
      handleMove,
    }
  },
})
</script>

<style scoped></style>
